import { ProCard } from "@ant-design/pro-components";
import { Transfer } from "antd";
import type { TransferDirection } from "antd/es/transfer";

import React, { useState } from "react";

const Page18: React.FC = () => {
  const [mockData] = useState(() => {
    const data = [];
    for (let i = 0; i < 20; i++) {
      data.push({
        key: i.toString(),
        title: `内容${i + 1}`,
        description: `描述${i + 1}`,
        chosen: false,
      });
    }
    return data;
  });

  const [targetKeys, setTargetKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  const handleChange = (nextTargetKeys: string[]) => {
    setTargetKeys(nextTargetKeys);
  };

  const handleSelectChange = (
    sourceSelectedKeys: string[],
    targetSelectedKeys: string[],
  ) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  const handleScroll = (
    direction: TransferDirection,
    e: React.SyntheticEvent<HTMLUListElement>,
  ) => {
    console.log("direction:", direction, "target:", e.target);
  };

  const handleSearch = (direction: TransferDirection, value: string) => {
    console.log("search:", direction, value);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>穿梭框页面</h1>
      <ProCard>
        <Transfer
          dataSource={mockData}
          titles={["源列表", "目标列表"]}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={handleChange}
          onSelectChange={handleSelectChange}
          onScroll={handleScroll}
          onSearch={handleSearch}
          render={(item) => item.title}
        />
      </ProCard>
    </div>
  );
};

export default Page18;
